ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã«ãããå®å šã§åé¢ãããã¹ãã¬ãŒãžç®¡çã®ããã®Frontend Origin Private File SystemïŒOPFSïŒã«ã€ããŠè§£èª¬ããŸãããã®å©ç¹ããŠãŒã¹ã±ãŒã¹ãå®è£ ãé«åºŠãªæ©èœã«ã€ããŠåŠã³ãŸãããã
Frontend Origin Private File System: åé¢ãããã¹ãã¬ãŒãžç®¡çã®ããã®å æ¬çãªã¬ã€ã
ãŠã§ãã¯ãåçŽãªããã¥ã¡ã³ãé ä¿¡ãããã€ãã£ããã¹ã¯ããããœãããŠã§ã¢ã«å¹æµããè€éãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãžãšå€§ããé²åããŸããããã®é²åã«ã¯ãããã³ããšã³ãã«ãããå ç¢ã§å®å šãªã¹ãã¬ãŒãžã¡ã«ããºã ãå¿ èŠã§ããOrigin Private File SystemïŒOPFSïŒã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³å ã§åé¢ãããã¹ãã¬ãŒãžã管çããããã®åŒ·åãªãœãªã¥ãŒã·ã§ã³ãšããŠç»å Žããããã©ãŒãã³ã¹ã®å€§å¹ ãªåäžãšã»ãã¥ãªãã£ã®åŒ·åãæäŸããŸãããã®ã¬ã€ãã§ã¯ãOPFSã®æ©èœãå©ç¹ããŠãŒã¹ã±ãŒã¹ãå®è£ ãé«åºŠãªæ©èœã«ã€ããŠå æ¬çã«è§£èª¬ããŸãã
Origin Private File SystemïŒOPFSïŒãšã¯ïŒ
Origin Private File SystemïŒOPFSïŒã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³ã«ãªãªãžã³åºæã®ãã©ã€ããŒããã¡ã€ã«ã·ã¹ãã ãžã®ã¢ã¯ã»ã¹ãæäŸãããã©ãŠã¶APIã§ããã€ãŸããåãŠã§ããµã€ããŸãã¯ã¢ããªã±ãŒã·ã§ã³ã¯ãä»ã®ãªãªãžã³ããã¯ã¢ã¯ã»ã¹ã§ããªãç¬èªã®åé¢ãããã¹ãã¬ãŒãžé åãæã¡ãã»ãã¥ãªãã£ã匷åããããŒã¿ç«¶åã鲿¢ããŸããOPFSã¯ãFile System Access APIã®äžéšãšããŠåäœãããã©ãŠã¶å ã§ãã¡ã€ã«ãçŽæ¥ç®¡çããããã®ããã髿§èœã§æè»ãªæ¹æ³ãæäŸããŸãã
localStorageãIndexedDBã®ãããªåŸæ¥ã®ãã©ãŠã¶ã¹ãã¬ãŒãžãªãã·ã§ã³ãšã¯ç°ãªããOPFSã¯çã®ãã¡ã€ã«ã·ã¹ãã ã€ã³ã¿ãŒãã§ãŒã¹ãæäŸããéçºè ã¯ãã€ãã£ãã¢ããªã±ãŒã·ã§ã³ãšåæ§ã®æ¹æ³ã§ãã¡ã€ã«ããã£ã¬ã¯ããªãæäœã§ããŸããããã«ãããç»åç·šéããããªåŠçãå ±åããã¥ã¡ã³ãç·šéãªã©ãå®è³ªçãªãã¡ã€ã«I/Oæäœãå¿ èŠãšãããŠã§ãã¢ããªã±ãŒã·ã§ã³ã«æ°ããå¯èœæ§ãéãããŸãã
OPFSã䜿çšããäž»ãªå©ç¹
- ããã©ãŒãã³ã¹ã®åäžïŒ OPFSã¯ã髿§èœãªãã¡ã€ã«ã¢ã¯ã»ã¹åãã«èšèšãããŠããŸããã·ãªã¢ã©ã€ãŒãŒã·ã§ã³ãšãã·ãªã¢ã©ã€ãŒãŒã·ã§ã³ã®ãªãŒããŒããããé »ç¹ã«çºçããIndexedDBãšã¯ç°ãªããOPFSã¯ãã¡ã€ã«ã®çŽæ¥æäœãå¯èœã«ããèªã¿åãããã³æžãèŸŒã¿æäœãå€§å¹ ã«é«éåããŸããããã¯ãå€§èŠæš¡ãªãã¡ã€ã«ãæ±ãã¢ããªã±ãŒã·ã§ã³ããé »ç¹ãªããŒã¿æŽæ°ãå¿ èŠãªã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠç¹ã«éèŠã§ãã
- ã»ãã¥ãªãã£ã®åŒ·åïŒ OPFSã®åé¢ãããæ§è³ªã«ããããããªãªãžã³ã«å±ããããŒã¿ãä»ã®ãªãªãžã³ããã¢ã¯ã»ã¹ãããããšã¯ãããŸãããããã«ãããã¯ãã¹ãµã€ãã¹ã¯ãªããã£ã³ã°ïŒXSSïŒæ»æãäžæ£ãªããŒã¿ã¢ã¯ã»ã¹ãé²ãããŠã§ãã¢ããªã±ãŒã·ã§ã³ãããå®å šã«ããŸããåãªãªãžã³ã¯ç¬èªã®å°çšã¹ãã¬ãŒãžé åãååŸããããŒã¿ãããã«åé¢ããŸãã
- çŽæ¥çãªãã¡ã€ã«æäœïŒ OPFSã¯ãéçºè ããã¡ã€ã«ããã£ã¬ã¯ããªãçŽæ¥äœæãèªã¿åããæžã蟌ã¿ãåé€ã§ãããã¡ã€ã«ã·ã¹ãã ã€ã³ã¿ãŒãã§ãŒã¹ãæäŸããŸããããã«ãããéçºããã»ã¹ãç°¡çŽ åãããããŒã¿ç®¡çã®å¶åŸ¡ãåäžããŸããAPIã¯æšæºã®ãã¡ã€ã«ã·ã¹ãã æäœããµããŒãããŠãããããæ¢åã®ã¢ããªã±ãŒã·ã§ã³ãç§»æ€ããããè€éãªãã¡ã€ã«åŠçèŠä»¶ãæã€æ°ããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ãããããããšã容æã«ãªããŸãã
- éåææäœïŒ OPFSæäœã¯éåæã§ãããããã¡ã€ã³ã¹ã¬ãããå¿çæ§ãç¶æããéäžçãªãã¡ã€ã«I/Oæäœäžã§ãã£ãŠããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãã€ã³ã¿ã©ã¯ãã£ããªç¶æ ãç¶æããŸããéåæAPIã¯UIã¹ã¬ããã®ãããã¯ãé²ããããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããŸãã
- WebAssemblyãšã®çµ±åïŒ OPFSã¯WebAssemblyãšã·ãŒã ã¬ã¹ã«çµ±åãããŠãããéçºè ã¯é«æ§èœã³ãŒãããã©ãŠã¶ã§çŽæ¥å®è¡ãããã¡ã€ã«ã·ã¹ãã ã«ã¢ã¯ã»ã¹ã§ããŸããããã¯ãWebAssemblyã®ããã©ãŒãã³ã¹ããæ©æµãåããèšç®éçŽçãªã¿ã¹ã¯ã«ç¹ã«åœ¹ç«ã¡ãŸãã
- ã¯ã©ãŒã¿ç®¡çïŒ ãã©ãŠã¶ã¯éåžžãOPFSã«ã¹ãã¬ãŒãžã¯ã©ãŒã¿ãé©çšãããŠãŒã¶ãŒã¯åãªãªãžã³ã«å²ãåœãŠãããé åã®éã管çã§ããŸããããã«ãããåäžã®ã¢ããªã±ãŒã·ã§ã³ãéå°ãªã¹ãã¬ãŒãžãªãœãŒã¹ãæ¶è²»ããããšãé²ããŸããã¯ã©ãŒã¿ç®¡çã¯ãå ¬æ£ãªãªãœãŒã¹å²ãåœãŠãä¿èšŒããã¢ããªã±ãŒã·ã§ã³ãã¹ãã¬ãŒãžã¹ããŒã¹ãç¬å ããããšãé²ããŸãã
OPFSã®ãŠãŒã¹ã±ãŒã¹
OPFSã¯ãããã³ããšã³ãã§ã®å¹ççãã€å®å šãªãã¡ã€ã«ã¹ãã¬ãŒãžãå¿ èŠãšããå¹ åºãã¢ããªã±ãŒã·ã§ã³ã«é©ããŠããŸãã以äžã«ãäž»èŠãªãŠãŒã¹ã±ãŒã¹ãããã€ã瀺ããŸãã
- ç»åããã³ãããªç·šéïŒ ãŠã§ãããŒã¹ã®ç»åããã³ãããªãšãã£ã¿ãŒã¯ãOPFSãæŽ»çšããŠå€§èŠæš¡ãªã¡ãã£ã¢ãã¡ã€ã«ãããŒã«ã«ã«ä¿åããã³åŠçããããã©ãŒãã³ã¹ãåäžããããµãŒããŒåŽã®åŠçãžã®äŸåã軜æžã§ããŸããããšãã°ãåçç·šéã¢ããªã¯ãOPFSã«ç»åã®ããŒãžã§ã³ãä¿åãããŠãŒã¶ãŒãå ã®ãã¡ã€ã«ãåããŠã³ããŒãããã«å€æŽãå ã«æ»ããããããçŽãããã§ããããã«ããŸãããããªãšãã£ã¿ãŒãå€§èŠæš¡ãªãããªãã¡ã€ã«ã«è€éãªãã£ã«ã¿ãŒãé©çšããå¿ èŠãããã·ããªãªãèããŠã¿ãŸããããOPFSã䜿çšãããšããšãã£ã¿ãŒã¯ãããªã»ã°ã¡ã³ããä¿åããããŒã«ã«ã§ãã£ã«ã¿ãŒãé©çšã§ãããããã¬ã€ãã³ã·ãŒãå€§å¹ ã«ççž®ãããç·šéãšã¯ã¹ããªãšã³ã¹ãåäžããŸãã
- å ±åããã¥ã¡ã³ãç·šéïŒ ãªã³ã©ã€ã³ããã¥ã¡ã³ããšãã£ã¿ãŒã®ãããªã¢ããªã±ãŒã·ã§ã³ã¯ãOPFSã䜿çšããŠããã¥ã¡ã³ãããŒã¿ãããŒã«ã«ã«ä¿åãããªã¢ã«ã¿ã€ã ã®ã³ã©ãã¬ãŒã·ã§ã³ãšãªãã©ã€ã³ã¢ã¯ã»ã¹ãå¯èœã«ã§ããŸããOPFSã¯ãäžæžãããªããžã§ã³ãããã³ãŠãŒã¶ãŒåºæã®èšå®ããã©ãŠã¶ã«çŽæ¥ä¿åã§ããŸãã
- ã²ãŒã ïŒ ãŠã§ãããŒã¹ã®ã²ãŒã ã¯ãOPFSãå©çšããŠã²ãŒã ã¢ã»ãããä¿åããã²ãŒã ã®é²è¡ç¶æ³ãä¿åããããŒã¿ãããŒã«ã«ã«ãã£ãã·ã¥ããããšã§ãããã©ãŒãã³ã¹ãåäžãããããã¹ã ãŒãºãªã²ãŒã ãšã¯ã¹ããªãšã³ã¹ãæäŸã§ããŸããããšãã°ãã²ãŒã ã¯ãã¯ã¹ãã£ãã¢ãã«ãããã³ãµãŠã³ããšãã§ã¯ããOPFSã«ä¿åããããŒãæéãççž®ããã²ãŒã å šäœã®å¿çæ§ãåäžãããããšãã§ããŸãã
- ãªãã©ã€ã³ã¢ããªã±ãŒã·ã§ã³ïŒ OPFSã䜿çšããŠããªãã©ã€ã³ã§æ©èœããããã°ã¬ãã·ããŠã§ãã¢ããªïŒPWAïŒãäœæãããŠãŒã¶ãŒãã€ã³ã¿ãŒãããæ¥ç¶ãªãã§ãããŒã¿ã«ã¢ã¯ã»ã¹ããŠæäœã§ããããã«ããããšãã§ããŸããOPFSã¯ã¢ããªã±ãŒã·ã§ã³ããŒã¿ãä¿åã§ããããããŠãŒã¶ãŒã¯ãªãã©ã€ã³ã®å Žåã§ãäœæ¥ãç¶è¡ã§ããŸãããŠãŒã¶ãŒãã¿ã¹ã¯ãäœæããã³ç®¡çã§ããã¿ã¹ã¯ç®¡çã¢ããªãæ³åããŠãã ãããã¿ã¹ã¯ããŒã¿ãOPFSã«ä¿åããããšã§ãã¢ããªã¯ãŠãŒã¶ãŒãã€ã³ã¿ãŒãããã«æ¥ç¶ãããŠããªãå Žåã§ãã·ãŒã ã¬ã¹ã«æ©èœããŸãã
- ããŒã¿å¯èŠåïŒ å€§èŠæš¡ãªããŒã¿ã»ãããèŠèŠåããã¢ããªã±ãŒã·ã§ã³ã¯ãOPFSã䜿çšããŠããŒã¿ãããŒã«ã«ã«ä¿åããã³åŠçããããã©ãŒãã³ã¹ãåäžããããµãŒããŒãžã®è² è·ã軜æžã§ããŸããããšãã°ãããŒã¿åæããŒã«ã¯CSVãã¡ã€ã«ãŸãã¯JSONããŒã¿ãOPFSã«ä¿åããããŒã«ã«ã§èšç®ãå®è¡ããŠãããé«éãªããŒã¿åŠçãšèŠèŠåãæäŸã§ããŸãã
- ãœãããŠã§ã¢éçºããŒã«ïŒ ãªã³ã©ã€ã³IDEãŸãã¯ã³ãŒããšãã£ã¿ãŒã¯ãOPFSãæŽ»çšããŠãããžã§ã¯ããã¡ã€ã«ãããŒã«ã«ã«ä¿åããããé«éã§å¿çæ§ã®é«ãã³ãŒãã£ã³ã°ãšã¯ã¹ããªãšã³ã¹ãæäŸã§ããŸããããã¯ãå ±åã³ãŒãã£ã³ã°ãŸãã¯ãªãã©ã€ã³éçºããµããŒãããã¢ããªã±ãŒã·ã§ã³ã«ç¹ã«åœ¹ç«ã¡ãŸãã
OPFSã®å®è£ ïŒå®è·µã¬ã€ã
OPFSã®å®è£ ã«ã¯ããã¡ã€ã«ã·ã¹ãã ãšã®å¯Ÿè©±ã«å¿ èŠãªã¡ãœãããæäŸããFile System Access APIã®äœ¿çšãå«ãŸããŸããæ¬¡ã®æé ã¯ãåºæ¬çãªããã»ã¹ã®æŠèŠã瀺ããŠããŸãã
1. ãã¡ã€ã«ã·ã¹ãã ãžã®ã¢ã¯ã»ã¹ã®ãªã¯ãšã¹ã
OPFSã«ã¢ã¯ã»ã¹ããã«ã¯ããã©ãŠã¶ãããã£ã¬ã¯ããªãã³ãã«ããªã¯ãšã¹ãããå¿
èŠããããŸããããã¯ãnavigator.storage.getDirectory()ã¡ãœããã䜿çšããŠå®è¡ã§ããŸãã
async function getOPFSDirectory() {
try {
const root = await navigator.storage.getDirectory();
return root;
} catch (error) {
console.error("Error accessing OPFS directory:", error);
return null;
}
}
ãã®é¢æ°ã¯ããªãªãžã³ã®ãã©ã€ããŒããã¡ã€ã«ã·ã¹ãã ã®ã«ãŒããã£ã¬ã¯ããªãååŸããŸããæ¬¡ã«ããã®ãã£ã¬ã¯ããªãã³ãã«ã䜿çšããŠããã¡ã€ã«ãšãµããã£ã¬ã¯ããªãäœæã§ããŸãã
2. ãã¡ã€ã«ãšãã£ã¬ã¯ããªã®äœæ
ãã£ã¬ã¯ããªãã³ãã«ãååŸããããgetFileHandle()ã¡ãœãããšgetDirectoryHandle()ã¡ãœããããããã䜿çšããŠããã¡ã€ã«ãšãã£ã¬ã¯ããªãäœæã§ããŸãã
async function createFile(directoryHandle, fileName) {
try {
const fileHandle = await directoryHandle.getFileHandle(fileName, { create: true });
return fileHandle;
} catch (error) {
console.error("Error creating file:", error);
return null;
}
}
async function createDirectory(directoryHandle, directoryName) {
try {
const directoryHandleNew = await directoryHandle.getDirectoryHandle(directoryName, { create: true });
return directoryHandleNew;
} catch (error) {
console.error("Error creating directory:", error);
return null;
}
}
create: trueãªãã·ã§ã³ã¯ããã¡ã€ã«ãŸãã¯ãã£ã¬ã¯ããªããŸã ååšããªãå Žåã«äœæãããããã«ããŸãã
3. ãã¡ã€ã«ãžã®æžã蟌ã¿
ãã¡ã€ã«ã«ããŒã¿ãæžã蟌ãã«ã¯ãcreateWritable()ã¡ãœããã䜿çšããŠFileSystemWritableFileStreamãäœæããå¿
èŠããããŸããæ¬¡ã«ãwrite()ã¡ãœããã䜿çšããŠãã¹ããªãŒã ã«ããŒã¿ãæžã蟌ãããšãã§ããŸãã
async function writeFile(fileHandle, data) {
try {
const writableStream = await fileHandle.createWritable();
await writableStream.write(data);
await writableStream.close();
} catch (error) {
console.error("Error writing to file:", error);
}
}
write()ã¡ãœããã¯ãæååããããã¡ãã¹ããªãŒã ãªã©ãããŸããŸãªã¿ã€ãã®ããŒã¿ãåãå
¥ããŸãã
4. ãã¡ã€ã«ããã®èªã¿åã
ãã¡ã€ã«ããããŒã¿ãèªã¿åãã«ã¯ãgetFile()ã¡ãœããã䜿çšããŠFileãªããžã§ã¯ããååŸããæ¬¡ã«text()ã¡ãœãããŸãã¯arrayBuffer()ã¡ãœããã䜿çšããŠãã¡ã€ã«ã®å
容ãèªã¿åãããšãã§ããŸãã
async function readFile(fileHandle) {
try {
const file = await fileHandle.getFile();
const contents = await file.text(); // Or file.arrayBuffer()
return contents;
} catch (error) {
console.error("Error reading file:", error);
return null;
}
}
5. ãã¡ã€ã«ãšãã£ã¬ã¯ããªã®åé€
ãã¡ã€ã«ãŸãã¯ãã£ã¬ã¯ããªãåé€ããã«ã¯ãremoveEntry()ã¡ãœããã䜿çšã§ããŸãã
async function deleteFile(directoryHandle, fileName) {
try {
await directoryHandle.removeEntry(fileName);
} catch (error) {
console.error("Error deleting file:", error);
}
}
async function deleteDirectory(directoryHandle, directoryName) {
try {
await directoryHandle.removeEntry(directoryName, { recursive: true });
} catch (error) {
console.error("Error deleting directory:", error);
}
}
ãã¡ã€ã«ãŸãã¯ãµããã£ã¬ã¯ããªãå«ããã£ã¬ã¯ããªãåé€ããã«ã¯ãrecursive: trueãªãã·ã§ã³ãå¿
èŠã§ãã
é«åºŠãªOPFSæ©èœ
OPFSã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãšæ©èœãããã«åŒ·åã§ããããã€ãã®é«åºŠãªæ©èœãæäŸããŸãã
1. åæã¢ã¯ã»ã¹ãã³ãã«
åæã¢ã¯ã»ã¹ãã³ãã«ã¯ãOPFSå ã®ãã¡ã€ã«ãžã®åæã¢ã¯ã»ã¹ãæäŸããã¡ã«ããºã ãæäŸããŸããããã¯ãéåæãªãŒããŒããããæãŸãããªãããã©ãŒãã³ã¹ãéèŠãªæäœã«åœ¹ç«ã¡ãŸãããã ããåæã¢ã¯ã»ã¹ãã³ãã«ã¯ãæ éã«äœ¿çšããªããšã¡ã€ã³ã¹ã¬ããããããã¯ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœäžãããå¯èœæ§ããããããæ³šæããŠäœ¿çšããããšãéèŠã§ãã
// Example of using Synchronization Access Handles (use with caution!)
//This example is for demonstration only and should be used with consideration
//of the potential to block the main thread.
async function exampleSyncAccessHandle(fileHandle) {
try {
const syncAccessHandle = await fileHandle.createSyncAccessHandle();
const buffer = new Uint8Array(1024);
const bytesRead = syncAccessHandle.read(buffer, { at: 0 });
console.log(`Read ${bytesRead} bytes`);
syncAccessHandle.close();
} catch (error) {
console.error("Error using SyncAccessHandle:", error);
}
}
éèŠïŒ åææäœã¯ã¡ã€ã³ã¹ã¬ããããããã¯ããUIãããªãŒãºããå¯èœæ§ããããŸãããããã¯æ§ããã«ãçãéããããã³ã°ã¿ã¹ã¯ã«ã®ã¿äœ¿çšããŠãã ãããã¡ã€ã³ã¹ã¬ããã®ãããã¯ãé²ãããã«ãèšç®éçŽçãªåææäœã«ã¯å°çšã®ã¯ãŒã«ãŒã¹ã¬ããã䜿çšããããšãæ€èšããŠãã ããã
2. ãã¡ã€ã«ã·ã¹ãã ãªãã¶ãŒããŒAPI
ãã¡ã€ã«ã·ã¹ãã ãªãã¶ãŒããŒAPIã䜿çšãããšãOPFSå ã®ãã¡ã€ã«ãšãã£ã¬ã¯ããªã®å€æŽãç£èŠã§ããŸããããã¯ãã¯ã©ã€ã¢ã³ããšãµãŒããŒéã§ããŒã¿ãåæãããããªã¢ã«ã¿ã€ã ã®ã³ã©ãã¬ãŒã·ã§ã³æ©èœãå®è£ ãããããã®ã«åœ¹ç«ã¡ãŸããObserver APIã¯ãOPFSå ã§ãã¡ã€ã«ãäœæã倿ŽããŸãã¯åé€ããããšãã«éç¥ãåä¿¡ããã¡ã«ããºã ãæäŸããŸãã
æ®å¿µãªãããçŸåšã®æ¥ä»ã§ã¯ããã¡ã€ã«ã·ã¹ãã ãªãã¶ãŒããŒAPIã¯ãŸã å®é𿮵éã§ããããã©ãŠã¶å šäœã§åºããµããŒããããŠããŸãããæ¬çªç°å¢ã§ãã®APIã«äŸåããåã«ããã©ãŠã¶ã®äºææ§ã確èªããããšãéèŠã§ãã
3. ã¹ããªãŒã ãšã®çµ±å
OPFSã¯Streams APIãšã·ãŒã ã¬ã¹ã«çµ±åãããŠããããã¡ã€ã«ãå¹ççã«ã¹ããªãŒãã³ã°ã§ããŸããããã¯ãå€§èŠæš¡ãªãã¡ã€ã«ãåŠçããããã¹ããªãŒãã³ã°ã¡ãã£ã¢ã¢ããªã±ãŒã·ã§ã³ãå®è£ ãããããå Žåã«ç¹ã«åœ¹ç«ã¡ãŸããã¹ããªãŒãã³ã°ã䜿çšãããšããã¡ã€ã«å šäœãäžåºŠã«ã¡ã¢ãªã«ããŒãããã®ã§ã¯ãªããããŒã¿ããã£ã³ã¯åäœã§åŠçã§ãããããããã©ãŒãã³ã¹ãåäžããã¡ã¢ãªäœ¿çšéãåæžãããŸãã
async function streamFile(fileHandle, writableStream) {
try {
const file = await fileHandle.getFile();
const readableStream = file.stream();
await readableStream.pipeTo(writableStream);
} catch (error) {
console.error("Error streaming file:", error);
}
}
ã»ãã¥ãªãã£ã«é¢ããèæ ®äºé
OPFSã¯åŸæ¥ã®ãã©ãŠã¶ã¹ãã¬ãŒãžãªãã·ã§ã³ãšæ¯èŒããŠã»ãã¥ãªãã£ã匷åããŠããŸãããæœåšçãªã»ãã¥ãªãã£ãªã¹ã¯ãèªèããé©åãªäºé²æªçœ®ãè¬ããããšãéèŠã§ãã
- ããŒã¿ãµãã¿ã€ãºïŒ ã³ãŒãã€ã³ãžã§ã¯ã·ã§ã³æ»æãé²ãããã«ããã¡ã€ã«ã«æžã蟌ãåã«åžžã«ãŠãŒã¶ãŒå ¥åããµãã¿ã€ãºããŠãã ãããOPFSã«æžã蟌ãŸããããŒã¿ãé©åã«æ€èšŒããããšã¹ã±ãŒããããŠããããšã確èªããŠãæªæã®ããã³ãŒããå®è¡ãããã®ãé²ããŸãã
- ã¯ã©ãŒã¿ç®¡çïŒ ã¢ããªã±ãŒã·ã§ã³ãéå°ãªã¹ãã¬ãŒãžãªãœãŒã¹ãæ¶è²»ããã®ãé²ãããã«ãã¹ãã¬ãŒãžã¯ã©ãŒã¿ãç£èŠããŸãããŠãŒã¶ãŒãã¹ãã¬ãŒãžå¶éã«è¿ã¥ããŠãããšãã«ãŠãŒã¶ãŒã«éç¥ããã¹ããŒã¹ãè§£æŸããããã«ä¿ãã¡ã«ããºã ãå®è£ ããŸãã
- ã¯ãã¹ãµã€ãã¹ã¯ãªããã£ã³ã°ïŒXSSïŒïŒ OPFSã¯ãªãªãžã³ããšã«ããŒã¿ãåé¢ããŸãããã¢ããªã±ãŒã·ã§ã³ã«è匱æ§ãããå Žåã¯ãXSSæ»æãçºçããå¯èœæ§ããããŸããæªæã®ããã¹ã¯ãªãããã¢ããªã±ãŒã·ã§ã³ã«æ¿å ¥ãããã®ãé²ãããã«ãå ç¢ãªXSSä¿è·ã¡ã«ããºã ãå®è£ ããŸãã
- ããŒã¿æå·åïŒ æ©å¯ããŒã¿ã®å Žåã¯ãããŒã¿ãOPFSã«æžã蟌ãåã«æå·åããããšãæ€èšããŠãã ãããããã«ãããã»ãã¥ãªãã£ã匷åãããäžæ£ã¢ã¯ã»ã¹ããããŒã¿ãä¿è·ãããŸãã
ãã©ãŠã¶ã®äºææ§
OPFSã¯ã»ãšãã©ã®ææ°ã®ãã©ãŠã¶ã§ãµããŒããããŠããŸãããæ¬çªã¢ããªã±ãŒã·ã§ã³ã«å®è£ ããåã«ãã©ãŠã¶ã®äºææ§ã確èªããããšãéèŠã§ããCan I Useã®ãããªãªãœãŒã¹ã䜿çšããŠãOPFSããã³é¢é£APIã®çŸåšã®ãµããŒãã¬ãã«ã確èªã§ããŸãã
OPFSããµããŒãããŠããªããã©ãŠã¶ã«ã¯ããã©ãŒã«ããã¯ã¡ã«ããºã ãæäŸããããšããå§ãããŸããããã«ã¯ãIndexedDBãlocalStorageãªã©ã®ä»£æ¿ã¹ãã¬ãŒãžãªãã·ã§ã³ã䜿çšããããå€ããã©ãŠã¶åãã«æ©èœãåæžãããããããšãå«ãŸããŸãã
ããã©ãŒãã³ã¹æé©åã®ãã³ã
OPFSã®ããã©ãŒãã³ã¹ãæå€§åããã«ã¯ãæ¬¡ã®æé©åã®ãã³ããæ€èšããŠãã ããã
- éåææäœã䜿çšããïŒ åžžã«éåææäœã䜿çšããŠãã¡ã€ã³ã¹ã¬ããã®ãããã¯ãé²ããŸãã
- ãã¡ã€ã«I/Oãæå°éã«æããïŒ ããŒã¿ããã£ãã·ã¥ããæžã蟌ã¿ããããåŠçããŠããã¡ã€ã«I/Oæäœã®æ°ãæžãããŸãã
- ã¹ããªãŒã ã䜿çšããïŒ ã¹ããªãŒã ã䜿çšããŠãå€§èŠæš¡ãªãã¡ã€ã«ãå¹ççã«åŠçããŸãã
- ãã¡ã€ã«æ§é ãæé©åããïŒ ãã£ã¬ã¯ããªãã©ããŒãµã«ã®æ°ãæå°éã«æããæ¹æ³ã§ãã¡ã€ã«ãšãã£ã¬ã¯ããªãç·šæããŸãã
- ã³ãŒãããããã¡ã€ãªã³ã°ããïŒ ãã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠã³ãŒãããããã¡ã€ãªã³ã°ããããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããŸãã
äŸãšã³ãŒãã¹ãããã
ããŸããŸãªã·ããªãªã§OPFSã䜿çšããæ¹æ³ã瀺ããããã€ãã®å®è·µçãªäŸãšã³ãŒãã¹ãããããæ¬¡ã«ç€ºããŸãã
äŸ1ïŒããã¹ããã¡ã€ã«ã®ä¿åãšããŒã
async function saveTextFile(directoryHandle, fileName, text) {
const fileHandle = await createFile(directoryHandle, fileName);
if (fileHandle) {
await writeFile(fileHandle, text);
console.log(`File "${fileName}" saved successfully.`);
}
}
async function loadTextFile(directoryHandle, fileName) {
const fileHandle = await directoryHandle.getFileHandle(fileName);
if (fileHandle) {
const text = await readFile(fileHandle);
console.log(`File "${fileName}" loaded successfully.`);
return text;
} else {
console.log(`File "${fileName}" not found.`);
return null;
}
}
// Usage:
const rootDirectory = await getOPFSDirectory();
if (rootDirectory) {
await saveTextFile(rootDirectory, "myFile.txt", "Hello, OPFS!");
const fileContents = await loadTextFile(rootDirectory, "myFile.txt");
console.log("File Contents:", fileContents);
}
äŸ2ïŒãã£ã¬ã¯ããªå ã®ãã¡ã€ã«ã®äœæãšäžèŠ§è¡šç€º
async function createAndListFiles(directoryHandle, fileNames) {
for (const fileName of fileNames) {
await createFile(directoryHandle, fileName);
}
const files = [];
for await (const entry of directoryHandle.values()) {
if (entry.kind === 'file') {
files.push(entry.name);
}
}
console.log("Files in directory:", files);
}
// Usage:
const rootDirectory = await getOPFSDirectory();
if (rootDirectory) {
await createAndListFiles(rootDirectory, ["file1.txt", "file2.txt", "file3.txt"]);
}
OPFSã®ä»£æ¿
OPFSã¯ãã¡ã€ã«ã¹ãã¬ãŒãžãšæäœã«å€§ããªå©ç¹ãæäŸããŸããã代æ¿ã¹ãã¬ãŒãžãªãã·ã§ã³ãšããããã®é·æãšçæãèªèããŠããããšãéèŠã§ãã
- LocalStorageïŒ å°éã®ããŒã¿åãã®ã·ã³ãã«ãªããŒãšå€ã®ã¹ãã¬ãŒãžãã¹ãã¬ãŒãžå®¹éãéãããŠãããåæã¢ã¯ã»ã¹ã¯å€§èŠæš¡ãªããŒã¿ã»ããã®ããã©ãŒãã³ã¹ã®ããã«ããã¯ã«ãªãå¯èœæ§ããããŸãã
- SessionStorageïŒ localStorageãšåæ§ã§ãããããŒã¿ã¯ãã©ãŠã¶ã»ãã·ã§ã³ã®æéã®ã¿ä¿åãããŸãã
- IndexedDBïŒ æ§é åããŒã¿åãã®ãã匷åãªããŒã¿ããŒã¹ã®ãããªã¹ãã¬ãŒãžãªãã·ã§ã³ãéåæã¢ã¯ã»ã¹ãšlocalStorageããã倧ããªã¹ãã¬ãŒãžå®¹éãæäŸããŸããã䜿çšãããè€éã«ãªãå¯èœæ§ããããŸãã
- CookiesïŒ ãŠãŒã¶ãŒã®ã³ã³ãã¥ãŒã¿ã«ä¿åãããå°ããªããã¹ããã¡ã€ã«ãäž»ã«è¿œè·¡ãšèªèšŒã«äœ¿çšãããŸãããå°éã®ããŒã¿ãä¿åããããã«ã䜿çšã§ããŸãã
ã¹ãã¬ãŒãžãªãã·ã§ã³ã®éžæã¯ãã¢ããªã±ãŒã·ã§ã³ã®ç¹å®ã®èŠä»¶ã«ãã£ãŠç°ãªããŸããå¹ççã§å®å šãªãã¡ã€ã«ã¹ãã¬ãŒãžãå¿ èŠãšããã¢ããªã±ãŒã·ã§ã³ã®å ŽåãOPFSãæé©ãªéžæè¢ã§ããããšããããããŸããããã·ã³ãã«ãªãŠãŒã¹ã±ãŒã¹ã§ã¯ãlocalStorageãŸãã¯IndexedDBã§ååãªå ŽåããããŸãã
çµè«
Frontend Origin Private File SystemïŒOPFSïŒã¯ããã©ãŠã¶ã¹ãã¬ãŒãžæ©èœã®å€§ããªé²æ©ã§ããããŠã§ãã¢ããªã±ãŒã·ã§ã³ã«å®å šã§åé¢ããã髿§èœãªãã¡ã€ã«ã·ã¹ãã ãæäŸããŸããOPFSãæŽ»çšããããšã§ãéçºè ã¯ãã€ãã£ããã¹ã¯ããããœãããŠã§ã¢ã«å¹æµããããã匷åã§å¿çæ§ã®é«ããŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸããOPFSã®ãã©ãŠã¶ãµããŒããæ¡å€§ãç¶ããã«ã€ããŠãææ°ã®ãŠã§ãéçºã®æšæºã³ã³ããŒãã³ãã«ãªãããšãæåŸ ãããŸãã
OPFSã®ååãå®è£ ãããã³é«åºŠãªæ©èœãçè§£ããããšã§ãéçºè ã¯ãã©ãŠã¶ç°å¢ã®å¯èœæ§ãæå€§éã«æŽ»çšãã驿°çã§é åçãªãŠã§ããšã¯ã¹ããªãšã³ã¹ãæ§ç¯ããããã®æ°ããªå¯èœæ§ãè§£ãæŸã€ããšãã§ããŸããç»åãšãããªã®ç·šéããå ±åããã¥ã¡ã³ãç·šéããªãã©ã€ã³ã¢ããªã±ãŒã·ã§ã³ãŸã§ãOPFSã¯éçºè ãããã©ãŒãã³ã¹ãšã»ãã¥ãªãã£ã®äž¡æ¹ãå ŒãåãããŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæã§ããããã«ããŸãããŠã§ããé²åãç¶ããã«ã€ããŠãOPFSã¯ãŠã§ãéçºã®æªæ¥ã圢äœãäžã§ãŸããŸãéèŠãªåœ¹å²ãæããã§ãããã